<template>
	<view class="container">
		<!-- 左侧分类 -->
		<scroll-view class="left-nav" scroll-y>
			<view v-for="(item, index) in seele.page_local_left_category" :key="index" class="nav-item"
				:class="{ active: seele.page_local_left_category_index === index }" @click="$store.dispatch('seele/chooseLocalLeftCate',index)">
				{{ item.category }}
			</view>
		</scroll-view>

		<!-- 右侧内容 -->
		<view class="right-content">
			<!-- 排序栏 -->
			<view class="sort-bar">
				<view class="sort-options">
					<view class="title-wrapper">
					  <text lass="title-text">热度</text>
					  <text class="title-text">排行</text>
					  <view class="sort-icons">
					    <view 
					      class="icon-triangle icon-up" 
					      :class="{active: sortOrder === 'asc'}"
					      @click="changeSort('asc')"
					    ></view>
					    <view 
					      class="icon-triangle icon-down"
					      :class="{active: sortOrder === 'desc'}"
					      @click="changeSort('desc')"
					    ></view>
					  </view>
					</view>

				</view>
			</view>

			<!-- 图片列表 -->
			<view class="all">全部</view>
			<view class="goods-list">
				<view @tap="openMini(item)" v-for="(item, index) in seele.page_local_right_list" :key="index" class="goods-item">
					<image :src="$wanlshop.oss(item.bg_image,0,0)" class="goods-image" />
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {mapState} from 'vuex';
	export default {
		
		data() {
			return {
				choose_index:0,
				
				activeCategory: 'clothing',
				sortOrder: 'desc', // desc/asc
				categories: [{
						type: 'clothing',
						name: '服装商店'
					},
					{
						type: 'entertainment',
						name: '娱乐场地'
					},
					{
						type: 'living',
						name: '生活场地'
					}
				],
				goodsList: [{
						type: 'clothing',
						image: '/static/m01.jpg ',
						title: '时尚卫衣',
						hot: 1500,
						time: 1648800000
					},
					{
							type: 'clothing',
							image: '/static/m01.jpg ',
							title: '时尚卫衣',
							hot: 1500,
							time: 1648800000
						},
						{
						type: 'clothing',
						image: '/static/m01.jpg ',
						title: '时尚卫衣',
						hot: 1500,
						time: 1648800000
					},{
						type: 'place',
						image: '/static/m01.jpg ',
						title: '时尚卫衣',
						hot: 1500,
						time: 1648800000
					},
				]
			}
		},
		computed: {
			...mapState(['seele']),
			filteredList() {
				return this.goodsList
					.filter(item => item.type === this.activeCategory)
					.sort((a, b) => {
						let valueA = this.sortBy === 'hot' ? a.hot : a.time
						let valueB = this.sortBy === 'hot' ? b.hot : b.time
						return this.sortOrder === 'desc' ? valueB - valueA : valueA - valueB
					})
			}
		},
		created(){
			this.$store.dispatch('seele/loadLeftCategory',{});
		},
		methods: {
			openMini(data){
				uni.navigateToMiniProgram({
				  appId: data.appid,
				  path: data.path,
				  extraData: {
				    
				  },
				  success(res) {
				    // 打开成功
				  }
				})
			},
			
			switchCategory(type) {
				this.activeCategory = type
			},
			changeSort(type) {
				if (this.sortOrder === type) return
				this.sortOrder = type
				// 这里可以添加排序逻辑
			}
		}
	}
</script>

<style scoped>
	.container {
		display: flex;
		height: 100vh;
	}

	.left-nav {
		width: 200rpx;
		background-color: #f5f5f5;
	}

	.nav-item {
		padding: 30rpx;
		font-size: 28rpx;
		color: #666;
		border-left: 6rpx solid transparent;
	}

	.nav-item.active {
		color: #e64340;
		border-color: #e64340;
		background-color: #fff;
	}

	.right-content {
		flex: 1;
		padding: 20rpx;
	}

	.sort-bar {
		display: flex;
		justify-content: flex-end;
		/* padding: 20rpx 0; */
	}

	.sort-options text {
		margin-left: 30rpx;
		color: #999;
		font-size: 28rpx;
	}

	.sort-active {
		color: #e64340 !important;
	}

	.sort-order {
		margin-left: 15rpx !important;
	}

	.all {
		width: 100%;
		padding: 8rpx 15rpx 10rpx;
		margin-bottom: 10rpx;
		font-size: 24rpx;
		color: #86878B;
		background-color: #F5F6FA;
	}

	/* 新增/修改的样式 */
	.title-wrapper {
	  display: flex;
	  align-items: center;
	  gap: 8rpx; /* 控制文字与图标间距 */
	}
	
	.title-text {
	  font-size: 36rpx;
	  /* font-weight: bold; */
	  margin-right: 8rpx; /* 文字与三角的间距 */
	}
	
	.sort-icons {
	  display: flex;
	  flex-direction: column;
	  gap: 4rpx; /* 上下三角间距 */
	}
	
	/* 调整后的三角形样式 */
	.icon-triangle {
	  width: 0;
	  height: 0;
	  border-left: 8rpx solid transparent;  /* 缩小宽度 */
	  border-right: 8rpx solid transparent; /* 缩小宽度 */
	  transition: all 0.2s;
	}
	
	.icon-up {
	  border-bottom: 12rpx solid #999; /* 高度减小 */
	  margin-top: -4rpx; /* 微调上三角位置 */
	}
	
	.icon-down {
	  border-top: 12rpx solid #999; /* 高度减小 */
	  margin-bottom: -4rpx; /* 微调下三角位置 */
	}
	
	/* 激活状态 */
	.icon-up.active {
	  border-bottom-color: #7B7B7B;
	}
	
	.icon-down.active {
	  border-top-color:#7B7B7B;
	}
	
	/* 点击热区优化 */
	.sort-icons {
	  position: relative;
	  padding: 16rpx; /* 扩大点击区域 */
	  margin-left: -16rpx; /* 抵消padding带来的位移 */
	}
	.sort-icons::after {
	  content: '';
	  position: absolute;
	  top: -10rpx;
	  left: -10rpx;
	  right: -10rpx;
	  bottom: -10rpx;
	}

	.goods-list {
		display: grid;
		grid-template-columns: auto;
		gap: 20rpx;
	}

	.goods-item {
		background: #fff;
		border-radius: 10rpx;
		overflow: hidden;
	}

	.goods-image {
		width: 100%;
		height: 300rpx;
	}

	.goods-title {
		display: block;
		padding: 10rpx;
		font-size: 26rpx;
		color: #333;
	}

	.goods-hot {
		display: block;
		padding: 0 10rpx 10rpx;
		font-size: 24rpx;
		color: #999;
	}
</style>